/**
 * Created by Franklin on 2017/3/31.
 */
var React = require('react');

var NoteDialog = require('../../action/utils/noteDialog');

var DataUploader = React.createClass({
    getInitialState : function () {
        var fileUploadUrl = '/data?type=file';
        var id = '';
        if(this.props['data-id']){
            id = this.props['data-id'];
        }
        var isCtrl = false;
        if(this.props['isCtrl']){
            isCtrl = true;
        }
        var title = '';
        if(this.props['data-title']){
            title = this.props['data-title'];
        }
        return {
            title : title,
            isCtrl : isCtrl,
            id : id,
            tag : '',
            gdid : '',
            fileUrl : fileUploadUrl,
            form : null,
            uploader : null
        };
    },

    componentDidMount : function () {
        this.setState({uploader : $('#fileuploader_' + this.state.id).uploadFile({
            //上传路径
            url : this.state.fileUrl,
            //上传文件名
            fileName :"datafile",
            //是否多个文件
            multiple : false,
            //是否拖拽上传
            dragDrop : true,
            //最大文件数
            maxFileCount:1,
            //规定上传文件格式
            acceptFiles:"*/*",
            //最大文件大小
            maxFileSize:100*1024*1024,
            //动态表单
            dynamicFormData : function(){
                var tag = '';
                if($('#fileuploaderTag_' + this.state.id).val() == ''){
                    tag = this.state.uploader.existingFileNames[0];
                }
                else{
                    tag = $('#fileuploaderTag_' + this.state.id).val();
                }
                this.state.tag = tag;
                var formData = {
                    gd_tag : tag
                };
                return formData;
            }.bind(this),
            //上传文件按钮文本
            uploadStr : "File Upload",
            //取消上传按钮文本
            cancelStr : "File Cancel",
            //拖拽上传提示文本（带HTML）
            dragDropStr : "<span><b>Drag Upload</b></span>",
            //完成上传提示文本
            doneStr : "Done",
            //是否自动传
            autoSubmit:false,
            //是否显示已上传文件
            showDownload:false,
            //上传完成回调
            onSuccess : this.onUploadFileFinished
        })});
    },

    onFileSubmit : function(e){
        this.state.uploader.startUpload();
    },

    onUploadFileFinished : function(files, data, xhr, pd){
        var resJson = JSON.parse(data);
        if(resJson.result == 'suc')
        {
            $('#fileuploaderTag_' + this.state.id).val('');
            $('#dataFileModel' + this.state.id).modal('hide');
            this.state.gdid = resJson.data;
            NoteDialog.openNoteDia("Data Upload Successfully", 'URL : ' + resJson.data);
            this.onFinished();
        }
        this.state.uploader.reset();
    },

    onFinished : function () {
        if(this.props.onFinish)
        {
            this.props.onFinish(this.state.gdid, this.state.tag);
        }
    },

    getGDID : function(){
        return this.state.gdid;
    },
    
    render : function(){
        var id = this.state.id;

        return (
            <div>
                <div className="btn-group">
                    <button className="btn btn-default" type="button" data-toggle="modal" data-target={"#dataFileModel" + id} ><i className="fa fa-file"></i> File</button>
                </div>
                <div aria-hidden="true" aria-labelledby="dataFileModel" role="dialog" tabIndex="-1" id={"dataFileModel" + id} className="modal fade">
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button aria-hidden="true" data-dismiss="modal" className="close" type="button">×</button>
                                <h4 className="modal-title">{'File - ' + this.state.title}</h4>
                            </div>
                            <div className="modal-body">
                                <h4>Tag</h4>
                                <input id={'fileuploaderTag_' + this.state.id} type="text" className="form-control" ></input>
                                <h4>DataFile</h4>
                                <div id={'fileuploader_' + this.state.id}>Upload</div>
                            </div>
                            <div className="modal-footer">
                                <button id={'btn_file_ok' + id} type="button" className="btn btn-success" onClick={this.onFileSubmit} >Confirm</button>
                                <button id={'btn_file_close' + id} type="button" className="btn btn-default" data-dismiss="modal" >Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        );
    }
});

module.exports = DataUploader;